<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">预约记录</view>
        </view>
        
        <!-- 状态切换 -->
        <view class="status-tabs">
            <view 
                class="tab-item" 
                v-for="(item, index) in statusTabs" 
                :key="index"
                :class="{'active': currentStatus === item.value}"
                @click="switchStatus(item.value)"
            >
                <text>{{item.label}}</text>
                <view class="count" v-if="item.count">{{item.count}}</view>
            </view>
        </view>
        
        <!-- 预约列表 -->
        <scroll-view class="record-scroll" scroll-y @scrolltolower="loadMore">
            <view class="record-list">
                <view class="record-item" v-for="(item, index) in recordList" :key="index">
                    <view class="header">
                        <view class="time">{{item.date}} {{item.time}}</view>
                        <view class="status" :class="item.status">{{getStatusText(item.status)}}</view>
                    </view>
                    
                    <view class="content">
                        <view class="doctor-info">
                            <image class="avatar" :src="item.doctor.avatar" mode="aspectFill"></image>
                            <view class="info">
                                <view class="name">{{item.doctor.name}}</view>
                                <view class="title">{{item.doctor.title}}</view>
                            </view>
                        </view>
                        
                        <view class="hospital">{{item.doctor.hospital}}</view>
                        
                        <view class="department">{{item.doctor.department}}</view>
                    </view>
                    
                    <view class="footer">
                        <view class="btn-group">
                            <view 
                                class="btn" 
                                v-for="(action, idx) in getActions(item.status)" 
                                :key="idx"
                                :class="action.type"
                                @click="handleAction(action.type, item)"
                            >
                                <text>{{action.label}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 加载更多 -->
            <view class="load-more" v-if="hasMore">
                <u-loadmore status="loading" />
            </view>
            
            <!-- 无数据 -->
            <view class="empty" v-if="recordList.length === 0">
                <image src="/static/images/empty.png" mode="aspectFit"></image>
                <text>暂无预约记录</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusTabs: [
                { label: '全部', value: 'all', count: 0 },
                { label: '待就诊', value: 'pending', count: 2 },
                { label: '已完成', value: 'completed', count: 5 },
                { label: '已取消', value: 'cancelled', count: 1 }
            ],
            currentStatus: 'all',
            recordList: [],
            page: 1,
            hasMore: true
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        switchStatus(status) {
            this.currentStatus = status
            this.page = 1
            this.hasMore = true
            this.loadRecords()
        },
        loadRecords() {
            // 模拟加载数据
            setTimeout(() => {
                const list = [
                    {
                        id: 1,
                        date: '2024-03-25',
                        time: '09:00-09:30',
                        status: 'pending',
                        doctor: {
                            name: '张医生',
                            title: '主任医师',
                            hospital: '北京协和医院',
                            department: '神经内科',
                            avatar: '/static/images/doctor1.png'
                        }
                    },
                    {
                        id: 2,
                        date: '2024-03-20',
                        time: '14:30-15:00',
                        status: 'completed',
                        doctor: {
                            name: '李医生',
                            title: '副主任医师',
                            hospital: '北京协和医院',
                            department: '神经内科',
                            avatar: '/static/images/doctor2.png'
                        }
                    }
                ]
                
                if (this.page === 1) {
                    this.recordList = list
                } else {
                    this.recordList = [...this.recordList, ...list]
                }
                
                this.hasMore = this.page < 3
                this.page++
            }, 500)
        },
        loadMore() {
            if (!this.hasMore) return
            this.loadRecords()
        },
        getStatusText(status) {
            const map = {
                pending: '待就诊',
                completed: '已完成',
                cancelled: '已取消'
            }
            return map[status] || status
        },
        getActions(status) {
            const actions = {
                pending: [
                    { type: 'cancel', label: '取消预约' },
                    { type: 'remind', label: '就诊提醒' }
                ],
                completed: [
                    { type: 'review', label: '写评价' },
                    { type: 'reappoint', label: '再次预约' }
                ],
                cancelled: [
                    { type: 'delete', label: '删除记录' }
                ]
            }
            return actions[status] || []
        },
        handleAction(type, record) {
            switch (type) {
                case 'cancel':
                    this.cancelAppointment(record)
                    break
                case 'remind':
                    this.setReminder(record)
                    break
                case 'review':
                    this.writeReview(record)
                    break
                case 'reappoint':
                    this.reappoint(record)
                    break
                case 'delete':
                    this.deleteRecord(record)
                    break
            }
        },
        cancelAppointment(record) {
            uni.showModal({
                title: '取消预约',
                content: '确定要取消该预约吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showToast({
                            title: '预约已取消',
                            icon: 'success'
                        })
                    }
                }
            })
        },
        setReminder(record) {
            uni.showToast({
                title: '已设置就诊提醒',
                icon: 'success'
            })
        },
        writeReview(record) {
            uni.navigateTo({
                url: `/pages/consultation/review?id=${record.id}`
            })
        },
        reappoint(record) {
            uni.navigateTo({
                url: `/pages/consultation/schedule?id=${record.doctor.id}`
            })
        },
        deleteRecord(record) {
            uni.showModal({
                title: '删除记录',
                content: '确定要删除该预约记录吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showToast({
                            title: '记录已删除',
                            icon: 'success'
                        })
                    }
                }
            })
        }
    },
    onLoad() {
        this.loadRecords()
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    display: flex;
    flex-direction: column;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .status-tabs {
        display: flex;
        background-color: #fff;
        padding: 20rpx 30rpx;
        margin-bottom: 20rpx;
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            
            text {
                font-size: 28rpx;
                color: #666;
            }
            
            .count {
                position: absolute;
                top: -10rpx;
                right: 20rpx;
                min-width: 32rpx;
                height: 32rpx;
                background-color: #ff4d4f;
                border-radius: 16rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 8rpx;
                
                text {
                    font-size: 20rpx;
                    color: #fff;
                }
            }
            
            &.active {
                text {
                    color: #1890FF;
                    font-weight: bold;
                }
                
                &::after {
                    content: '';
                    position: absolute;
                    bottom: -20rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 40rpx;
                    height: 4rpx;
                    background-color: #1890FF;
                    border-radius: 2rpx;
                }
            }
        }
    }
    
    .record-scroll {
        flex: 1;
        height: 0;
        
        .record-list {
            padding: 20rpx;
            
            .record-item {
                background-color: #fff;
                border-radius: 20rpx;
                margin-bottom: 20rpx;
                overflow: hidden;
                
                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 20rpx 30rpx;
                    border-bottom: 2rpx solid #F7F7FA;
                    
                    .time {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: bold;
                    }
                    
                    .status {
                        font-size: 24rpx;
                        padding: 4rpx 12rpx;
                        border-radius: 4rpx;
                        
                        &.pending {
                            color: #1890FF;
                            background-color: #e6f7ff;
                        }
                        
                        &.completed {
                            color: #52c41a;
                            background-color: #f6ffed;
                        }
                        
                        &.cancelled {
                            color: #999;
                            background-color: #f5f5f5;
                        }
                    }
                }
                
                .content {
                    padding: 30rpx;
                    
                    .doctor-info {
                        display: flex;
                        align-items: center;
                        margin-bottom: 20rpx;
                        
                        .avatar {
                            width: 80rpx;
                            height: 80rpx;
                            border-radius: 40rpx;
                            margin-right: 20rpx;
                        }
                        
                        .info {
                            .name {
                                font-size: 28rpx;
                                color: #333;
                                font-weight: bold;
                                margin-bottom: 6rpx;
                            }
                            
                            .title {
                                font-size: 24rpx;
                                color: #666;
                            }
                        }
                    }
                    
                    .hospital {
                        font-size: 24rpx;
                        color: #666;
                        margin-bottom: 10rpx;
                    }
                    
                    .department {
                        font-size: 24rpx;
                        color: #666;
                    }
                }
                
                .footer {
                    padding: 20rpx 30rpx;
                    border-top: 2rpx solid #F7F7FA;
                    
                    .btn-group {
                        display: flex;
                        justify-content: flex-end;
                        
                        .btn {
                            margin-left: 20rpx;
                            padding: 10rpx 20rpx;
                            border-radius: 30rpx;
                            font-size: 24rpx;
                            
                            &.cancel {
                                color: #ff4d4f;
                                background-color: #fff1f0;
                            }
                            
                            &.remind {
                                color: #1890FF;
                                background-color: #e6f7ff;
                            }
                            
                            &.review {
                                color: #52c41a;
                                background-color: #f6ffed;
                            }
                            
                            &.reappoint {
                                color: #1890FF;
                                background-color: #e6f7ff;
                            }
                            
                            &.delete {
                                color: #999;
                                background-color: #f5f5f5;
                            }
                        }
                    }
                }
            }
        }
        
        .load-more {
            padding: 20rpx 0;
        }
        
        .empty {
            padding: 100rpx 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            image {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}
</style> 